<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>ARCTREE 茶話心語 訂購單</title>
<link rel="stylesheet" href="/templates/atomic/css/template.css" type="text/css">
<link rel="stylesheet" href="/templates/atomic/css/yoona.css" type="text/css">
<style>
* {
	margin:0;
	padding:0;	
}
#order-container {
	width:915px;
	margin:0 auto;	
}
#order-container h2 {
	background:#BEA787;	
	font-size:18px;
	font-weight:bold;	
	line-height:33px;
	color:#FFFFFF;
	padding-left:47px;
	margin-top:26px;		
}
#order-container table {
	letter-spacing:3px;
	vertical-align:middle;
}
#order-container th {
	font-size:15px;
	font-weight:bold;	
	color:#BEA787;	
	line-height: 25px;
}
#order-container td {
	font-size:14px;
	font-weight:bold;
	color:#727171;	
	line-height:31px;
}
#order-container table span {
	font-size:12px;
	letter-spacing:0;
	color:#BEA787;	
}
#order-container .length {
	width:113px;
	text-align:center;			
}
#order-container .price {
	width:144px;
	text-align:center;	
}
#clip {
	position:fixed;
	width:100%;
	height:100%;
	background:#000;
	opacity:0.7;
	left:0;
	top:0;
	z-index:1;
}
#info {
	position:fixed;
	padding:30px 50px;
	width:100px;
	height:20px;
	line-height:20px;
	color:#000;
	background:#CCC;
	left:50%;
	top:50%;
	margin-left:-100px;
	margin-top:-40px;
	z-index:3;
	font-size:14px;
}
</style>
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript">
var inCart = false;
var productPrice = 0;		
var shippingPrice = 0;
var cashOn = 0;
var totalPrice = 0;	
$(function(){
	$('.length').attr('maxlength','4');
	$('.price,.length').val('0');
	$('#submitBtn').click(function(){
		var totalPrice = $('#totalPrice').val(); 
		console.log($('[name="payMethod"]').val());
		if(totalPrice == 0){
			alert('尚未購買任何商品');
		}else if($('#order').val() == '' || $('#tel').val() == '' || $('#phone').val() == '' || $('#email').val() == '' || $('#deliver').val() == '' || $('#email2').val() == '' || $('#tel2').val() == '' || $('#phone2').val() == '' || $('#postal').val() == '' || $('#adress').val() == ''){
			alert('有必填欄位尚未填寫')
		}else if(!/^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})*$/.test($('#email').val()) || !/^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})*$/.test($('#email2').val())){
			alert('eamil格式填寫錯誤')
		}else if(!/^09[0-9]{8}$/.test($('#phone').val()) ||!/^09[0-9]{8}$/.test($('#phone2').val())){
			alert('行動電話格式填寫錯誤');
		}else if($('[name="payMethod"]').val() == ''){
			alert('尚未選擇付費方式');
		}else if($('#payMethod1').prop('checked') == true && $('#lastCode1').val() == ''){
			alert('尚未填寫轉出帳號末五碼');
		}else if($('#payMethod2').prop('checked') == true && $('#lastCode2').val() == ''){
			alert('尚未填寫轉出帳號末五碼');
		}else if($('#invoice3').prop('checked') == true && $('#invoiceTitle').val() == '' && $('#invoiceTitle').val() == ''){
			alert('發票開立資料填寫不完全');
		}else {
			$('body').append('<div id="clip"></div><div id="info">傳送中,請稍候...</div>')
			$('#orderForm').submit();
		} 
	})
	$('.length').change(function(){
		unitPrice = $(this).parent().parent().find('.money').html().replace('$','');
		length = $(this).val();
		price = unitPrice * length;	
		productPrice = 0;		
		if(isNaN(price)){
			$(this).val('');
			price = '';
		}
		$(this).parent().parent().find('td .price').val(price);
		$('.price').each(function(){
			productPrice += parseInt($(this).val());
		})
		$('#productPrice').val(productPrice);
		if(productPrice > 2000 && productPrice != ''){
			shippingPrice = 0;
		}else {
			shippingPrice = 100;
		}
		$('#shippingPrice').val(shippingPrice);
		if($('#payMethod3').prop('checked') == true){
			cashOn = 30;
		}else {
			cashOn = 0;
		}
		$('#cashOn').val(cashOn);
		totalPrice = productPrice + shippingPrice + cashOn;
		$('.total').val(totalPrice);
	})	

	$('[name="payMethod"]').change(function(){
		var cashOn = 0;		
		if($('#payMethod3').prop('checked') == true){
			cashOn = 30;
		}else {
			cashOn = 0;
		}		
		$('#cashOn').val(cashOn);
		totalPrice = productPrice + shippingPrice + cashOn;
		$('.total').val(totalPrice);
	})
	$('#sameBox').change(function(){
		if($(this).prop('checked') == true){
			$('#deliver').val($('#order').val());
			$('#email2').val($('#email').val());
			$('#tel2').val($('#tel').val());
			$('#phone2').val($('#phone').val());									
		}
	})
	$('#sameBox2').change(function(){
		if($(this).prop('checked') == true){
			$('#postal2').val($('#postal').val());
			$('#adress2').val($('#adress').val());								
		}
	})
})
</script>
</head>

<body>
<div id="wrapper">  
    <div class="header">
            <div class="logo"><a href="http://arctree.chibakuma.net/"><img src="/images/logo.png"></a></div>
            <div class="clear"></div>
    </div>
	<div id="order-container">
    	<form name="orderForm" id="orderForm" method="post" action="sendMail.php">
		<h2>裸包袋茶</h2>
		<table cellpadding="0" cellspacing="0" width="915" bordercolor="#BEA787" border="1">
			<tr bgcolor="#E2D7C9">
				<th width="455" align="left" style="padding-left:47px;">產品名稱</th>
				<th width="122">價格</th>
				<th width="128">數量</th>
				<th>金額</th>
			</tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">蒸系列 水出煎茶 (3.0g×25入)</td>
                <td class="money">$280</td>
                <td><input type="text" name="length1-1" class="length" /></td>
                <td><input type="text" name="price1-1" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">蒸系列 靜岡煎茶 (3.0g×25入)</td>
                <td class="money">$350</td>
                <td><input type="text" name="length1-2" class="length" /></td>
                <td><input type="text" name="price1-2" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">蘊系列 東方美人 (2.8g×25入)</td>
                <td class="money">$450</td>
                <td><input type="text" name="length1-3" class="length" /></td>
                <td><input type="text" name="price1-3" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">蘊系列 紅玉紅茶 (2.8g×25入)</td>
                <td class="money">$380</td>
                <td><input type="text" name="length1-4" class="length" /></td>
                <td><input type="text" name="price1-4" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">醇系列 清香烏龍 (2.8g×25入)</td>
                <td class="money">$280</td>
                <td><input type="text" name="length1-5" class="length" /></td>
                <td><input type="text" name="price1-5" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">醇系列 熟香烏龍 (2.8g×25入)</td>
                <td class="money">$280</td>
                <td><input type="text" name="length1-6" class="length" /></td>
                <td><input type="text" name="price1-6" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">融系列 玄米煎茶 (3.0g×25入)</td>
                <td class="money">$250</td>
                <td><input type="text" name="length1-7" class="length" /></td>
                <td><input type="text" name="price1-7" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">融系列 迷迭煎茶 (3.0g×25入)</td>
                <td class="money">$250</td>
                <td><input type="text" name="length1-8" class="length" /></td>
                <td><input type="text" name="price1-8" class="price" readonly="readonly" /></td>
            </tr>                                                                                    
		</table>
		<h2>隨身袋茶</h2>
		<table cellpadding="0" cellspacing="0" width="915" bordercolor="#BEA787" border="1">
			<tr bgcolor="#E2D7C9">
				<th width="455" align="left" style="padding-left:47px;">產品名稱</th>
				<th width="122">價格</th>
				<th width="128">數量</th>
				<th>金額</th>
			</tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">蒸系列 水出煎茶 (3.0g×15入)</td>
                <td class="money">$220</td>
                <td><input type="text" name="length2-1" class="length" /></td>
                <td><input type="text" name="price2-1" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">蒸系列 靜岡煎茶 (3.0g×15入)</td>
                <td class="money">$300</td>
                <td><input type="text" name="length2-2" class="length" /></td>
                <td><input type="text" name="price2-2" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">蘊系列 東方美人 (2.8g×15入)</td>
                <td class="money">$350</td>
                <td><input type="text" name="length2-3" class="length" /></td>
                <td><input type="text" name="price2-3" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">蘊系列 紅玉紅茶 (2.8g×15入)</td>
                <td class="money">$300</td>
                <td><input type="text" name="length2-4" class="length" /></td>
                <td><input type="text" name="price2-4" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">醇系列 清香烏龍 (2.8g×15入)</td>
                <td class="money">$220</td>
                <td><input type="text" name="length2-5" class="length" /></td>
                <td><input type="text" name="price2-5" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">醇系列 熟香烏龍 (2.8g×15入)</td>
                <td class="money">$220</td>
                <td><input type="text" name="length2-6" class="length" /></td>
                <td><input type="text" name="price2-6" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">融系列 玄米煎茶 (3.0g×15入)</td>
                <td class="money">$200</td>
                <td><input type="text" name="length2-7" class="length" /></td>
                <td><input type="text" name="price2-7" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">融系列 迷迭煎茶 (3.0g×15入)</td>
                <td class="money">$200</td>
                <td><input type="text" name="length2-8" class="length" /></td>
                <td><input type="text" name="price2-8" class="price" readonly="readonly" /></td>
            </tr>                                                                                    
		</table>    
		<h2>罐裝散茶</h2>
		<table cellpadding="0" cellspacing="0" width="915" bordercolor="#BEA787" border="1">
			<tr bgcolor="#E2D7C9">
				<th width="455" align="left" style="padding-left:47px;">產品名稱</th>
				<th width="122">價格</th>
				<th width="128">數量</th>
				<th>金額</th>
			</tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">蒸系列 靜岡煎茶 (100g)</td>
                <td class="money">$320</td>
                <td><input type="text" name="length3-1" class="length" /></td>
                <td><input type="text" name="price3-1" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">蒸系列 深蒸煎茶 (100g)</td>
                <td class="money">$360</td>
                <td><input type="text" name="length3-2" class="length" /></td>
                <td><input type="text" name="price3-2" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">蘊系列 東方美人 (60g)</td>
                <td class="money">$400</td>
                <td><input type="text" name="length3-3" class="length" /></td>
                <td><input type="text" name="price3-3" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">蘊系列 紅玉紅茶 (60g)</td>
                <td class="money">$320</td>
                <td><input type="text" name="length3-4" class="length" /></td>
                <td><input type="text" name="price3-4" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">蘊系列 蜜香紅茶 (60g)</td>
                <td class="money">$320</td>
                <td><input type="text" name="length3-5" class="length" /></td>
                <td><input type="text" name="price3-5" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">醇系列 清香烏龍 (120g)</td>
                <td class="money">$380</td>
                <td><input type="text" name="length3-6" class="length" /></td>
                <td><input type="text" name="price3-6" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">醇系列 熟香烏龍 (120g)</td>
                <td class="money">$380</td>
                <td><input type="text" name="length3-7" class="length" /></td>
                <td><input type="text" name="price3-7" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">醇系列 炭焙烏龍 (120g)</td>
                <td class="money">$380</td>
                <td><input type="text" name="length3-8" class="length" /></td>
                <td><input type="text" name="price3-8" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">融系列 玄米煎茶 (100g)</td>
                <td class="money">$200</td>
                <td><input type="text" name="length3-9" class="length" /></td>
                <td><input type="text" name="price3-9" class="price" readonly="readonly" /></td>
            </tr>                                                                                    
		</table>
        <h2>禮盒組</h2>
		<table cellpadding="0" cellspacing="0" width="915" bordercolor="#BEA787" border="1">
			<tr bgcolor="#E2D7C9">
				<th width="455" align="left" style="padding-left:47px;">產品名稱</th>
				<th width="122">價格</th>
				<th width="128">數量</th>
				<th>金額</th>
			</tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">裸包袋茶組4入 水出煎茶+紅玉紅茶+清香烏龍+玄米煎茶</td>
                <td class="money">$1350</td>
                <td><input type="text" name="length4-1" class="length" /></td>
                <td><input type="text" name="price4-1" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">隨身袋茶組4入 靜岡煎茶+東方美人+熟香烏龍+迷迭煎茶</td>
                <td class="money">$1150</td>
                <td><input type="text" name="length4-2" class="length" /></td>
                <td><input type="text" name="price4-2" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">罐裝散茶組2入 紅玉紅茶+清香烏龍</td>
                <td class="money">$850</td>
                <td><input type="text" name="length4-3" class="length" /></td>
                <td><input type="text" name="price4-3" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">罐裝散茶組2入 靜岡煎茶+熟香烏龍</td>
                <td class="money">$850</td>
                <td><input type="text" name="length4-4" class="length" /></td>
                <td><input type="text" name="price4-4" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">罐裝散茶組2入 深蒸煎茶+蜜香紅茶</td>
                <td class="money">$850</td>
                <td><input type="text" name="length4-5" class="length" /></td>
                <td><input type="text" name="price4-5" class="price" readonly="readonly" /></td>
            </tr>
            <tr align="center">
            	<td align="left"  style="padding-left:47px;">罐裝散茶組2入 東方美人+炭焙烏龍</td>
                <td class="money">$950</td>
                <td><input type="text" name="length4-6" class="length" /></td>
                <td><input type="text" name="price4-6" class="price" readonly="readonly" /></td>
            </tr>
                                                                                    
		</table>  
		<table cellpadding="0" cellspacing="0" width="915" bordercolor="#BEA787" border="1" style="margin-top:10px;">
            <tr align="center">
            	<td align="left" width="711" style="padding-left:47px;">購買商品合計</td>
                <td><input type="text" name="productPrice" id="productPrice" size="21" readonly="readonly" style="text-align:center;" value="0" /></td>
            </tr>
            <tr align="center">
            	<td align="left" style="padding-left:47px;">運費計算 (滿2000免運費，未滿兩千酌收運費100元)</td>
                <td><input type="text" name="shippingPrice" id="shippingPrice" size="21" readonly="readonly" style="text-align:center;" value="0" /></td>
            </tr>
            <tr align="center">
            	<td align="left" style="padding-left:47px;">貨到付款酌收手續費30元</td>
                <td><input type="text" name="cashOn" id="cashOn" size="21" readonly="readonly" style="text-align:center;" value="0" /></td>
            </tr>
			<tr bgcolor="#E2D7C9">
				<td align="left" style="padding-left:47px;">金額加總</td>
				<td align="center"><input type="text" name="totalPrice" id="totalPrice" class="total" size="21" value="0" readonly="readonly" style="text-align:center;" /></td>
			</tr>                                                                                    
		</table>      
        <h2>訂購資訊</h2>   
		<table cellpadding="0" cellspacing="0" width="915" bordercolor="#BEA787" border="1" style="margin-top:10px;">   
        	<tr>
            	<td align="left" style="padding-left:47px;">
                	<label>訂購日期：</label>
                    <input type="text" name="orderDate" id="orderDate" size="19" />
                </td>
            </tr>
        	<tr>
            	<td align="left" style="padding-left:47px;">
                	<label>訂購人：</label>
                    <input type="text" name="order" id="order" size="19" /> 
                    <span class="gold">(必填)</span>    
                	<label>連絡電話：</label>
                    <input type="text" name="tel" id="tel" size="19" /> 
                    <span class="gold">(必填)</span>  
                	<label>行動電話：</label>
                    <input type="text" name="phone" id="phone" size="19" /> 
                    <span class="gold">(必填)</span>                                                     
                </td>
            </tr>
        	<tr>
            	<td align="left" style="padding-left:47px;">
                	<label>Email：</label>
                    <input type="text" name="email" id="email" size="19" />                
                </td>
            </tr>
        	<tr>
            	<td align="left" style="padding-left:47px;">
                	<label>收件人：</label>
                    <input type="text" name="deliver" id="deliver" size="19" />
                    <input type="checkbox" name="sameBox" id="sameBox" />
                    <label for="sameBox">同訂購人 (其他資訊免填)</label>
                </td>
            </tr>
        	<tr>
            	<td align="left" style="padding-left:47px;">
                	<label>Email：</label>
                    <input type="text" name="email2" id="email2" size="19" />  
                    <span class="gold">(必填)</span>    
                	<label>連絡電話：</label>
                    <input type="text" name="tel2" id="tel2" size="19" /> 
                    <span class="gold">(必填)</span>  
                	<label>行動電話：</label>
                    <input type="text" name="phone2" id="phone2" size="19" /> 
                    <span class="gold">(必填)</span>                                                     
                </td>
            </tr>
        	<tr>
            	<td align="left" style="padding-left:47px;">
                	<label>收件地址：</label>
                    <input type="text" name="postal" id="postal" size="8" placeholder="郵遞區號" maxlength="3" />
                    <input type="text" name="adress" id="adress" size="101" />
                    <span class="gold">(必填)</span>                
                </td>
            </tr>
        	<tr>
            	<td align="left" style="padding-left:47px;">
                	<label>可收件時間：</label>
                    <input type="checkbox" name="deliverDate1" value="1" />中午前
                    <input type="checkbox" name="deliverDate2" value="2" />下午12時-17時
                    <input type="checkbox" name="deliverDate3" value="3" />下午17時-20時
                </td>
            </tr>
        	<tr>
            	<td>
                	<div class="formTop" style="padding-left:47px;border-bottom:2px dotted #BCA586;">
                    	<p>付款方式：</p>
                        <p>
                        	<label>總金額：</label>
                            <input type="text" name="total" id="total" class="total" size="19" value="0" readonly="readonly" />
                        </p>
                        <p>
                        	<input type="radio" name="payMethod" id="payMethod1" value="1" checked="checked" />
                        	<label>郵局劃撥，轉出帳號末五碼：</label>
                            <input type="text" name="lastCode1" id="lastCode1" size="19" />
                        </p>
                        <p>劃撥帳號：19083801</p>
                        <p>郵局戶名：徐淑芬</p>
                        <p>
                        	<input type="radio" name="payMethod" id="payMethod2" value="2" />
                        	<label>ATM轉帳，轉出帳號末五碼：</label>
                            <input type="text" name="lastCode2" id="lastCode2" size="19" />                        	
                        </p>
                        <p>銀行名稱：聯邦商業銀行 龍潭分行    銀行代碼：803</p>
                        <p>銀行帳號：030508014698             戶名：葉步真</p>
                        <p>
                        	<input type="radio" name="payMethod" id="payMethod3" value="3" />
                        	<label>貨到付款 (酌收30元手續費)</label>                        
                        </p>
                    </div>
                    <div class="formBtm" style="padding-left:47px;">
                    	<p>發票開立資料：</p>
                        <p>
                        	<input type="radio" name="invoice" id="invoice2" value="1" checked="checked" />
                        	<label>二聯式</label>                          
                        </p>
                        <p>
                        	<input type="radio" name="invoice" id="invoice3" value="2" />
                        	<label>三聯式</label> 
                            <label>發票抬頭：</label>
                            <input type="text" name="invoiceTitle" id="invoiceTitle" size="26" /> 
                            <label>統一編號：</label>
                            <input type="text" name="uniform" id="uniform" size="26" />                                                             
                        </p>                        
                        <p>
                        	<label>發票郵寄地址：</label> 
                            <input type="checkbox" name="sameBox2" id="sameBox2" /><label for="sameBox2">同訂購人</label>                            
                        </p>
                        <p style="padding-left:130px;">
                            <input type="text" name="postal2" id="postal2" size="8" placeholder="郵遞區號" maxlength="3" />
                            <input type="text" name="adress2" id="adress2" size="100" />                        	
                        </p>
                    </div>
                </td>
            </tr>                                                                                    
        </table>
        <div style="margin-top:20px;text-align:center;">
<!--        	<input type="button" name="submitBtn" id="submitBtn" value="" style="width:134px;height:46px;background:url(images/bg_submit.png);border:none;" />-->
<input type="submit" value="Submit" />
        </div>
        </form>                         	
	</div>
    <div class="footer">
      <h1>新福隆股份有限公司 SHINGFULUNG CO., LTD.</h1>
      <p>桃園縣龍潭鄉龍新路三和段500巷25號</p>
      <p>Tel:+886-3-4792008  Fax:+886-3-4892991</p>
      <div class="finpo">©2012  Arctree Design All Rights Reserved.<a href="http://www.finpo.com.tw/" target="_blank">Web Design By Finpo.</a></div>
    </div>
</div>
</body>
</html>